<template>

  <div class="box">
    <!-- 页头 -->
    <el-page-header style="padding: 20px;" content="详情页面" @back="goBack" />
    <div class="divTabs">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="基本信息" name="first">
          <el-form ref="form" :model="form" :rules="rules" style="padding-top: 30px;" label-position="left">
            <el-row>
              <el-col :span="8">
                <el-form-item v-if="isShowForm" label="车型编号:" prop="truckTypeId">
                  <el-input v-model="form.truckTypeId" disabled class="inputW" />
                </el-form-item>
                <div v-else class="else"><i>车型编号:</i> {{ form.truckTypeId }}</div>
              </el-col>

              <el-col :span="8">
                <el-form-item v-if="isShowForm" label="车牌号码:" prop="licensePlate">
                  <el-input v-model="form.licensePlate" class="inputW" />
                </el-form-item>
                <div v-else class="else"><i>车牌号码:</i> {{ form.licensePlate }}</div>
              </el-col>

              <el-col :span="8">
                <el-form-item v-if="isShowForm" label="车型名称:" prop="truckTypeName">
                  <el-input v-model="form.truckTypeName" class="inputW" />
                </el-form-item>
                <div v-else class="else"><i>车型名称:</i> {{ form.truckTypeName }}</div>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8">
                <el-form-item v-if="isShowForm" label="车型体积:" prop="allowableVolume">
                  <el-input v-model.number="form.allowableVolume" class="inputW">
                    <span slot="suffix">m³</span>
                  </el-input>
                </el-form-item>
                <div v-else class="else"><i>车型体积:</i> {{ form.allowableVolume }}</div>
              </el-col>

              <el-col :span="8">
                <el-form-item v-if="isShowForm" label="车辆载重:" prop="allowableLoad">
                  <el-input v-model.number="form.allowableLoad" class="inputW">
                    <span slot="suffix">吨</span>
                  </el-input>
                </el-form-item>
                <div v-else class="else"><i>车辆载重:</i> {{ form.allowableLoad }}</div>
              </el-col>

              <el-col :span="8">
                <el-form-item v-if="isShowForm" label="GPSID:" prop="deviceGpsId">
                  <el-input v-model="form.deviceGpsId" class="inputW" />
                </el-form-item>
                <div v-else class="else"><i>GPSID</i> :{{ form.deviceGpsId }}</div>
              </el-col>
            </el-row>

            <el-row>
              <el-col :span="2">
                <span>图片信息</span>
              </el-col>
              <el-col :span="4">
                <img :src="form.picture" alt="">
              </el-col>
              <el-col :span="8">
                <el-form-item v-if="isShowForm">
                  <el-upload
                    action=""
                    class="upbox"
                    list-type="picture-card"
                    :on-preview="imgs"
                    multiple
                    :before-upload="beforeAvatarUpload"
                    :http-request="uploadImage"
                    show-file-list
                  >
                    <el-dialog :visible="dialogVisible">
                      <img :src="form.picture" alt="">
                    </el-dialog>
                    <i class="el-icon-upload" />

                    <div slot="tip" class="el-upload__tip">注：图片大小不超过5M；仅能上传 PNG JPEG JPG类型图片；建议上传400*300尺寸的图片；最多上传2张</div>
                  </el-upload>
                </el-form-item>

              </el-col>
            </el-row>
            <el-form-item v-if="isShowForm" :span="8">
              <el-button type="primary" @click="submitForm">保存</el-button>
              <el-button @click="close">取消</el-button>
            </el-form-item>
            <el-button v-else type="primary" @click="isShowForm = true">编辑</el-button>
          </el-form>
        </el-tab-pane>

      </el-tabs>
    </div>

  </div>

</template>

<script>
import { getDetails, imageUpload, updateDetails } from '../api/carList'
export default {
  data() {
    return {
      dialogVisible: false,
      activeName: 'first',
      isShowForm: false,
      form: {
        allowableLoad: null, // 重量
        allowableVolume: null, // 体积
        deviceGpsId: '', // GPS
        licensePlate: '', // 车牌号码
        picture: '', // 图片信息
        truckTypeId: null, // 车辆类型id
        truckTypeName: ''// 车辆类型Name
      },
      rules: {
        truckTypeId: [{ required: true, message: '内容不能为空', trigger: 'blur' }],
        allowableLoad: [
          { required: true, message: '内容不能为空', trigger: 'blur' },
          { type: 'number', message: '内容必须为数字值' }
        ],
        allowableVolume: [
          { required: true, message: '内容不能为空', trigger: 'blur' },
          { type: 'number', message: '内容必须为数字值' }
        ],
        truckTypeName: [{ required: true, message: '内容不能为空', trigger: 'blur' }],
        licensePlate: [{ required: true, message: '内容不能为空', trigger: 'blur' }],
        deviceGpsId: [{ required: true, message: '内容不能为空', trigger: 'blur' }]

      }
    }
  },
  created() {
    this.getDetails()
  },
  methods: {
    // 获取详情
    async getDetails() {
      console.log(1)
      //   console.log(this.$route.params.id)
      const res = await getDetails(this.$route.params.id)
      // console.log(res.data)
      this.form = res.data
    },
    goBack() {
      this.$router.push('/car/carList')
    },
    handleClick(tab, event) {
      console.log(tab, event)
    },
    // 关闭编辑状态
    close() {
      this.isShowForm = false
      this.$refs.form.resetFields()
    },
    // 上传前
    // 检查函数 判断文件的类型还有大小 return  true(继续上传)/false(停止上传)
    beforeAvatarUpload(file) {
      // jpeg png gif bmp
      const isJPG = ['image/jpeg', 'image/png', 'image/jpg'].includes(file.type)
      const isLt5M = file.size / 1024 / 1024 < 5 // 5M
      // 如果类型不通过
      if (!isJPG) {
        this.$message.error('上传图片只能是 JPG PNG GIF BMP 格式!')
        return false
      }
      // 如果大小不通过
      if (!isLt5M) {
        this.$message.error('上传图片大小不能超过 5MB!')
        return false
      }
    },
    //
    imgs() {
      this.dialogVisible = true
    },
    // 上传文件
    async uploadImage(val) {
      console.log(val)
      const formData = new FormData()
      formData.append('file', val.file)
      const res = await imageUpload(formData)
      console.log(res)
      this.form.picture = res.data
    },
    // 点击保存
    async submitForm() {
      await updateDetails(this.$route.params.id, this.form)
      this.$message.success('更新成功')
      this.getDetails()
      this.close()
    }
  }
}
</script>

<style lang="scss" scoped>
.box{
    background-color: #f3f5f9;
    .divTabs{
        margin:0 20px;
        background-color: #fff;
        padding: 30px;
        .else{
            padding: 20px;
        }
    }
}
.inputW{
  width: 260px;
}
i{
  margin-right: 20px;

}
img{
  width: 150px;
  height: 150px;
}
.upbox{
  width: 300px;
  height: 200px;
}
</style>
